<template>
  <!-- dashboard-editor-container  -->
  <div class="outerBox" ref="outerDom" @scroll="getScrollTop">
    <!-- <github-corner class="github-corner"  position:fixed;  margin-top:12px;  z-index: 999;/> -->
    <section id="section1">
    <el-row style="padding:16px 16px 0;background:#fff;">
      <el-col :span="5" class="card-box">
        <!-- <i class="el-icon-s-data" /><span style="font-weight:600;color:#666;margin-right: 450px;margin-left: 5px;">
          销售总览
        </span> -->
        <el-cascader class="region" v-model="value" placeholder="选择店铺分组" clearable :options="cascadeList"
          :props="{ checkStrictly: true }" @change="handleChange" style="width:300px;height: 30px;">
        </el-cascader>

      </el-col>
      <!-- background-color: #f5f5f5; -->
      <el-col :span="12" style="height: 30px;">
        <nav id="navbar">
          <ul>
            <li :class="{ active: isActiveSection(1) }">
              <a href="#section1" @click="scrollToSection(1)">销售总览</a>
            </li>
            <li :class="{ active: isActiveSection(2) }">
              <a href="#section2" @click="scrollToSection(2)">渠道排行</a>
            </li>
            <li :class="{ active: isActiveSection(3) }">
              <a href="#section3" @click="scrollToSection(3)">店铺排行</a>
            </li>
            <li :class="{ active: isActiveSection(4) }">
              <a href="#section4" @click="scrollToSection(4)">地区排行</a>
            </li>
          </ul>
        </nav>
      </el-col>
      <el-col :span="7">
        <date v-model="valueTime" :type.sync="groupType" @handleChangeTime="handleChangeTime($event)"></date>
      </el-col>
      <!-- <timeSearch @getDateArr="getDateArr" @changDay="changDay" :timeArr="timeArr" :dayActive="this.dayActive"
        :dayLimit="1095" /> -->

    </el-row>

    
      <el-row style="background:#fff;margin-bottom:32px;padding:16px 16px 0;">
        <h4 style="font-weight:500;color:#666;margin-left: 5px;margin-top: 25px;"><i class="el-icon-s-data"
            style="margin-right: 5px;" />销售总览
        </h4>
        <panel-group @handleSetLineChartData="handleSetLineChartData" :biNumberOfItem=this.biNumberOfItem
          :biNumberItem=this.biNumberItem />
      </el-row>


      
      <!-- <line-chart :chart-data="lineChartData" /> -->
      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">

        <chartData :chart-data="echartData" />
      </el-row>
    </section>

    <section id="section2">
      <el-row :gutter="10" style="margin-bottom:32px;">
        <el-col :span="17">
          <el-card style="height: calc(100vh - 500px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 渠道排行榜</span>

            </div>
            <el-table :data="channelSaleTopList" :height="pageHeight" highlight-current-row style="width: 100%">

              <el-table-column label="排名" width="60" type="index"></el-table-column>

              <el-table-column label="渠道" align="center" prop="channel" width="110"></el-table-column>
              <el-table-column label="销售金额" align="center" prop="salesAmount" width="110"></el-table-column>

              <el-table-column label="退款金额" align="center" prop="returnAmount" width="110" />
              <el-table-column label="净销售额" align="center" prop="netSalesAmount" width="110"></el-table-column>

              <el-table-column label="综合退货率" align="center" prop="comprehensiveReturnRate">
                <template slot-scope="scope">
                  <div>{{ scope.row.comprehensiveReturnRate.toFixed(2) }}%</div>
                </template>
              </el-table-column>

              <el-table-column label="订单总数" align="center" prop="totalOrdersNumber"></el-table-column>

              <el-table-column label="销售件数" align="center" prop="totalSoldNumber" />
              <el-table-column label="销售毛利额" align="center" prop="salesGrossProfit" />
              <el-table-column label="客单价" align="center" prop="customerUnitPrice">
                <template slot-scope="scope">
                  <div>{{ scope.row.customerUnitPrice.toFixed(2) }}</div>
                </template>
              </el-table-column>

              <el-table-column label="平均折扣率" align="center" prop="averageDiscountRateGoods">
                <template slot-scope="scope">
                  <div>{{ (scope.row.averageDiscountRateGoods * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
              <el-table-column label="销售占比" align="center" prop="amountRatio">
                <template slot-scope="scope">
                  <div>{{ (scope.row.amountRatio * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
            <div slot="header"><span><i class="el-icon-pie-chart"></i> 渠道排行分析</span></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="usedmemory" style="height: 380px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <section id="section3">
      <el-row :gutter="10" style="margin-bottom:32px;">
        <el-col :span="17">
          <el-card style="height: calc(100vh - 420px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 店铺排行榜</span>

            </div>
            <el-table :data="shopSaleTopList" :height="pageHeight" highlight-current-row style="width: 100%">

              <el-table-column label="排名" width="60" type="index"></el-table-column>

              <el-table-column label="店铺" align="center" prop="shop" :show-overflow-tooltip="true"
                width="110"></el-table-column>
              <el-table-column label="销售金额" align="center" prop="salesAmount" width="110"></el-table-column>

              <el-table-column label="退款金额" align="center" prop="returnAmount" width="110" />
              <el-table-column label="净销售额" align="center" prop="netSalesAmount" width="110"></el-table-column>

              <el-table-column label="综合退货率" align="center" prop="comprehensiveReturnRate">
                <template slot-scope="scope">
                  <div>{{ scope.row.comprehensiveReturnRate.toFixed(2) }}%</div>
                </template>
              </el-table-column>

              <el-table-column label="订单总数" align="center" prop="totalOrdersNumber"></el-table-column>

              <el-table-column label="销售件数" align="center" prop="totalSoldNumber" />
              <el-table-column label="销售毛利额" align="center" prop="salesGrossProfit" />
              <el-table-column label="客单价" align="center" prop="customerUnitPrice">
                <template slot-scope="scope">
                  <div>{{ scope.row.customerUnitPrice.toFixed(2) }}</div>
                </template>
              </el-table-column>

              <el-table-column label="平均折扣率" align="center" prop="averageDiscountRateGoods">
                <template slot-scope="scope">
                  <div>{{ (scope.row.averageDiscountRateGoods * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
              <el-table-column label="销售占比" align="center" prop="amountRatio">
                <template slot-scope="scope">
                  <div>{{ (scope.row.amountRatio * 100).toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="7">
          <el-card>
            <div slot="header"><span><i class="el-icon-pie-chart"></i> 店铺排行分析</span></div>
            <div class="el-table el-table--enable-row-hover el-table--medium">
              <div ref="commandstats" style="height: 460px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>








    <section id="section4">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-card style="height: calc(100vh - 125px)">
            <div slot="header">
              <span><i class="el-icon-collection"></i> 销售地区Top20</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text" icon="el-icon-refresh-right"></el-button> -->
              <!-- @click="refreshCacheNames()" -->
            </div>
            <el-table :data="TopSallist" :height="tableHeight" highlight-current-row style="width: 100%">
              <!--  @row-click="getCacheKeys" -->
              <el-table-column label="排名" width="60" type="index"></el-table-column>

              <el-table-column label="省份" align="center" prop="province" width="135"></el-table-column>

              <el-table-column label="城市" align="center" prop="city" />
              <el-table-column label="订单数" align="center" prop="orderCount"></el-table-column>

              <el-table-column label="销售金额" align="center" prop="salesAmount" />

              <el-table-column label="销售占比" align="center" prop="amountRatio">
                <template slot-scope="scope">
                  <div>{{ scope.row.amountRatio.toFixed(2) }}%</div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="14">
          <el-card style="height: calc(100vh - 125px)">
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </el-row> -->

    <!-- <el-row :gutter="8">
      <el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
        <transaction-table />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <todo-list />
      </el-col>
      <el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom:30px;">
        <box-card />
      </el-col>
    </el-row> -->
    <div class="scrollBox" v-show="isShow" @click="goBack">⬆️</div>
  </div>
</template>

<script>
import { getCache } from "@/api/monitor/cache";
import * as echarts from "echarts";
import date from "./day/date.vue";
import chartData from "./components/chartData";
import timeSearch from "./day/day.vue";
// import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './components/PanelGroup'
// import LineChart from './components/LineChart'

// import RaddarChart from './components/RaddarChart'
// import PieChart from './components/PieChart'
// import BarChart from './components/BarChart'
import { listBiChannelSaleDwd, getBiChannelSaleDwd, delBiChannelSaleDwd, addBiChannelSaleDwd, updateBiChannelSaleDwd, synchroChannelData, selectChannelStatistics, selectSaleSingle, numberOfItem, TopSaleProvince, channelSaleTop, shopSaleTop } from "@/api/chart/BiChannelSaleDwd";
import { listBiShopSaleDwd, getBiShopSaleDwd, delBiShopSaleDwd, addBiShopSaleDwd, updateBiShopSaleDwd, selectShopStatic } from "@/api/chart/BiShopSaleDwd";
import { listBrandChannelShop, getBrandChannelShop, delBrandChannelShop, addBrandChannelShop, updateBrandChannelShop } from "@/api/chart/brandChannelShop";
// import TransactionTable from './components/TransactionTable'
// import TodoList from './components/TodoList'
// import BoxCard from './components/BoxCard'

const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

export default {
  name: 'Admin',
  components: {
    // GithubCorner,
    PanelGroup,
    // LineChart,

    // RaddarChart,
    // PieChart,
    // BarChart,

    chartData,
    // TransactionTable,
    // TodoList,
    // BoxCard
    timeSearch,
    date
  },
  data() {
    return {
      scrollTop: 0, //默认距离顶部的距离
      isShow: false, //控制返回顶部按钮的显隐
      scrollTrigger: false, //默认初始值
      //店铺SaleTop
      shopSaleTopList: [],
      //渠道SaleTop
      channelSaleTopList: [],
      // 统计店铺信息
      commandstats: null,
      //统计渠道信息
      usedmemory: null,
      //锚点
      sections: document.querySelectorAll('section'),
      activeSection: null,
      active: null,
      scrollTimer: null,
      //地区前20
      TopSallist: [],
      tableHeight: window.innerHeight - 175,
      pageHeight: window.innerHeight - 280,
      //BI指标数据
      biNumberItem: [],
      //时间控件
      timeObj: {},
      //客单价
      biNumberOfItem: '',

      //时间控件
      valueTime: new Date(),
      groupType: "date",


      highlighted: ['销售金额',], // 初始化时，前两个元素高亮

      loading: false,
      //传递数据
      echartData: {
        columns: ['支付日期', '销售金额'],
        rows: [],
      },
      //时间
      // 
      dayActive: 365,
      timeArr: [{ value: '2', label: '昨天' }, { value: '7', label: '最近7天' }, { value: '30', label: '日' }, { value: '56', label: '周' }, { value: '365', label: '月' }, { value: '1', label: '自定义' }],
      timeGap: { startTime: "", endTime: "" },
      // 店铺 
      cascadeList: [],
      // , "天猫", "vfu运动旗舰店"
      value: ["VFU", "天猫"],
      //店铺名称 
      shopName: '',
      lineChartData: lineChartData.newVisitis
    }
  },
  created() {
    this.getList();

    // this.handleChangeTime()
    /** 查询品牌渠道店铺关系列表 */
    this.getdataSourceList()
    this.openLoading();

  },
  mounted() {
    window.addEventListener('scroll', this.startScrollTimer);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.startScrollTimer);
  },
  methods: {
    //锚点
    scrollToSection(index) {
      const target = this.sections[index];
      // console.log(JSON.stringify(index));
      //     return
      this.active = index
      if (target) {

        this.$nextTick(() => {
          target.scrollIntoView({ behavior: 'smooth' });
          this.activeSection = target;

        });
      }
    },
    //锚点
    startScrollTimer() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      // console.log(scrollTop) // 滑动的长度
      // var offsetTop = document.querySelector('.banner').offsetHeight
      this.scrollTimer = setInterval(() => {
        
        const currentSection = document.querySelector('section[data-active]');
        if (currentSection !== this.activeSection) {
          this.activeSection = currentSection;
          console.log(JSON.stringify(this.activeSection));
        } else {
          clearInterval(this.scrollTimer);
        }
      }, 100); // 每100毫秒检查一次滚动位置是否变化  
    },
    //锚点高亮
    isActiveSection(sectionId) {
      // 检查当前导航项是否处于高亮状态  
      return this.active === sectionId;
    },
    //选完时间后发请求
    handleChangeTime(timeObj) {
      // console.log(type)
      // console.log(timeObj)
      // TODO
      this.timeObj = timeObj
      let obj = { salesGrade: this.value.join(","), ...timeObj }
      console.log(JSON.stringify(obj));


      if (!obj.endTime) {
        return

      } else {
        //曲线
        this.getechartChannelData(obj)
        //销售指标
        this.getselectSaleSingle(obj)
        //渠道SaleTop
        this.getchannelSaleTop(obj)
        //店铺SaleTop
        this.getshopSaleTop(obj)

      }
      let param = { dataSource: this.value, startTime: this.dateFormat(timeObj.startTime), endTime: this.dateFormat(timeObj.endTime), dataType: this.groupType }
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return

      } else {
        // this.getechartChannelData(obj)
        //客件数
        this.getnumberOfItem(param)
        //地区Top20
        this.getTopSal(param)
      }


    },
    //客件数
    getnumberOfItem(param) {
      numberOfItem(param).then(response => {
        this.biNumberOfItem = response.biNumberOfItem
        console.log(response);
      })

    },
    //地区Top20
    getTopSal(param) {
      TopSaleProvince(param).then(response => {
        if (response) {
          this.TopSallist = response
        }
        console.log(JSON.stringify(response));
      })

    },
    //渠道SaleTop
    getchannelSaleTop(obj) {
      channelSaleTop(obj).then(response => {
        console.log(JSON.stringify(response));
        if (response) {
          this.channelSaleTopList = response

          //饼图
          let list = []
          response.forEach(item => {
            list.push({
              name: item.channel,
              value: item.salesAmount
            })
          })

          this.$modal.closeLoading();

          this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
          this.usedmemory.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            series: [
              {
                name: "销售金额",
                type: "pie",
                // roseType: "radius",
                radius: [15, 95],
                center: ["50%", "38%"],
                data: list,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
              }
            ]
          });

        }

      })
    },


    //店铺SaleTop
    getshopSaleTop(obj) {
      shopSaleTop(obj).then(response => {
        console.log(JSON.stringify(response));
        if (response) {
          this.shopSaleTopList = response

          //饼图
          let list = []
          response.forEach(item => {
            list.push({
              name: item.shop,
              value: item.salesAmount
            })
          })

          this.$modal.closeLoading();

          this.commandstats = echarts.init(this.$refs.commandstats, "macarons");
          this.commandstats.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c} ({d}%)",
            },
            series: [
              {
                name: "销售金额",
                type: "pie",
                // roseType: "radius",

                radius: [15, 95],
                center: ["50%", "38%"],
                data: list,
                animationEasing: "cubicInOut",
                animationDuration: 1000,
              }
            ]
          });


        }

      })
    },
    //销售指标
    getselectSaleSingle(obj) {
      selectSaleSingle(obj).then(response => {
        console.log(JSON.stringify(response));
        if (response) {
          this.biNumberItem = response
        }

      })
    },

    //曲线
    getechartChannelData(obj) {
      selectChannelStatistics(obj).then(response => {

        var row = []
        response.forEach(item => {
          row.push({
            "支付日期": item.payDateUnit,
            "销售金额": item.salesAmount,
            "退款金额": item.returnAmount,
            "净销售额": item.netSalesAmount,
            "综合退货率": item.comprehensiveReturnRate * 0.01,
            "发货前退货率": item.returnBeforeShipmentRate * 0.01,
            "发货后退货率": item.returnAfterShipmentRate * 0.01,
            "订单数量": item.totalOrdersNumber,
            "商品销售件数": item.totalSoldNumber,
            "销售毛利": item.salesGrossProfit,
            "连带率": item.jointSeveralRateStr,
            "客单价": item.customerUnitPriceStr,
            "货单价": item.unitPriceStr,

            "商品货单价": item.unitPriceGoodsStr,
            "配件货单价": item.accessoriesUnitPriceStr,
            "商品平均销售成本": item.averageCostSalesStr,
            "平均销售毛利率": item.averageSalesGrossProfit * 0.01,
            "商品平均折扣率": item.averageDiscountRateGoods * 0.01,

            "赠品配件数": item.complimentaryAccessoriesNumber,
            "配件销售数量": item.salesAccessoriesNumber,

            "配件成本比率": item.accessoriesCostRate,
            "配件消耗量比率": item.accessoriesConsumptionRate,

            // "总销售件数": item.totalSalesNumber,
            // "发货前退货件数": item.returnBeforeShipmentNumber,

          })

        })
        // console.log(JSON.stringify(row));

        this.echartData.rows = row

        // this.echartData.rows = row
      })



    },
    //指标点击回传
    handleSetLineChartData(type) {
      // console.log(JSON.stringify(type));
      if (this.highlighted.includes(type)) {
        return;
      }
      // 移除旧的高亮元素  
      this.highlighted.shift();
      // // 添加新的高亮元素 
      this.highlighted.push(type);


      console.log(JSON.stringify(this.highlighted));
      var arr = ['支付日期']
      let temp = arr.concat(this.highlighted)
      // let temp = arr.push(type)
      console.log(JSON.stringify(temp));
      this.echartData.columns = temp
      // const obj = {
      //   newVisitis: [130, 140, 141, 142, 145, 150, 160],
      //   messages: [120, 82, 91, 154, 162, 140, 145],
      //   purchases: [80, 100, 121, 104, 105, 90, 100],
      //   shoppings: [180, 160, 151, 106, 145, 150, 130]
      // }
      // this.echartData.columns = ['日期', '访问用户']
      // this.echartData.rows = [
      //   { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
      //   { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
      //   { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
      //   { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
      //   { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
      //   { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
      // ]
      // this.lineChartData = lineChartData[type]
      // this.lineChartData = obj
    },
    //店铺控件
    handleChange(val) {
      console.log(JSON.stringify(val));

      // var lastElement = val.pop();
      // this.shopName = lastElement

      // console.log(this.dayActive);
      let obj = { salesGrade: this.value.join(","), ...this.timeObj }
      console.log(JSON.stringify(obj));


      if (!obj.endTime) {
        return

      } else {
        //曲线
        this.getechartChannelData(obj)
        //销售指标
        this.getselectSaleSingle(obj)
        //渠道SaleTop
        this.getchannelSaleTop(obj)
        //店铺SaleTop
        this.getshopSaleTop(obj)
      }
      let param = { dataSource: this.value, startTime: this.dateFormat(this.timeObj.startTime), endTime: this.dateFormat(this.timeObj.endTime), dataType: this.groupType }
      console.log(JSON.stringify(param));
      if (!param.endTime) {
        return

      } else {
        // this.getechartChannelData(obj)
        this.getnumberOfItem(param)
        this.getTopSal(param)
      }

    },
    //时间控件
    changDay(val) {
      this.dayActive = val;
      this.timeGap.startTime = val[0];
      this.timeGap.endTime = val[1];
    },
    getDateArr(value) {
      this.timeGap.startTime = value[0];
      this.timeGap.endTime = value[1];
      console.log(JSON.stringify(this.dayActive));
      // console.log(JSON.stringify(this.timeGap));

      if (this.dayActive == 1 || this.dayActive == 7 || this.dayActive == 2) {
        console.log('不请求');
        const end = new Date();
        const start = new Date();
        // console.log(new Date(new Date() - 24 * 68 * 60 * 1000 * 30).toLocaleString());
        const newStart = this.dateFormat(start.setTime(start.getTime() - 86400000 * 30));
        const newEnd = this.dateFormat(end.setTime((end).getTime() - 8.64e7));
        const queryParam = { shopName: this.value.slice(-1)[0], payDayStart: newStart, payDayEnd: newEnd }
        console.log(JSON.stringify(queryParam));

      } else {
        var obj = { shopName: this.value.slice(-1)[0], payDayStart: this.timeGap.startTime, payDayEnd: this.timeGap.endTime }
        console.log(JSON.stringify(obj));
        this.getBiList(obj)
      }
      this.dayActive = 1
    },
    getBiList(obj) {
      this.loading = true;
      selectShopStatic(obj).then(response => {
        console.log(JSON.stringify(response.rows));
        var row = []
        response.rows.forEach(item => {
          row.push({
            "支付日期": item.payDay,
            "销售金额": item.salesAmount,
            "退款金额": item.returnAmount,
            "净销售额": item.netSalesAmount,
            "综合退货率": item.comprehensiveReturnRate * 0.01,
            "发货前退货率": item.returnBeforeShipmentRate * 0.01,
            "发货后退货率": item.returnAfterShipmentRate * 0.01,
            "订单数量": item.totalOrdersNumber,
            "商品销售件数": item.totalSoldNumber,
            "销售毛利": item.salesGrossProfit,
            "连带率": item.jointSeveralRateStr,
            "客单价": item.customerUnitPriceStr,
            "货单价": item.unitPriceStr,

            "商品货单价": item.unitPriceGoodsStr,
            "配件货单价": item.accessoriesUnitPriceStr,
            // "商品平均销售成本": item.unitPriceStr,
            "平均销售毛利率": item.averageSalesGrossProfit * 0.01,
            "商品平均折扣率": item.averageDiscountRateGoods * 0.01,

            "赠品配件数": item.complimentaryAccessoriesNumber,
            "销售配件数": item.salesAccessoriesNumber,

            "配件成本比率": item.accessoriesCostRate,
            "配件消耗量比率": item.accessoriesConsumptionRate,

            // "总销售件数": item.totalSalesNumber,
            // "发货前退货件数": item.returnBeforeShipmentNumber,

          })

        })
        console.log(JSON.stringify(row));

        this.echartData.rows = row
        // this.BiShopSaleDwdList = response.rows;
        // this.total = response.total;
        this.loading = false;
      });
    },
    // 时间格式转换
    dateFormat(date) {
      date = new Date(date);
      let Y = date.getFullYear() + '-';
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + '';
      return Y + M + D
    },
    /** 查询品牌渠道店铺关系列表 */
    getdataSourceList() {
      listBrandChannelShop().then(response => {
        // response.rows = [
        //     { channel: '抖音', shopName: 'VFU抖一抖店-抖音', brand: 'VFU' },
        //     { channel: '抖音', shopName: 'VFU-抖音小店', brand: 'VFU' },
        //     { channel: '头条放心购', shopName: 'VFU-头条放心购', brand: 'VFU' },
        //     { channel: '拼多多', shopName: 'VFU-拼多多', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微店', brand: 'VFU' },
        //     { channel: '微信', shopName: 'VFU-微信商城', brand: 'VFU' },
        //     { channel: '小红书', shopName: 'VFU-小红书', brand: 'VFU' },
        //     { channel: '严选', shopName: 'VFU-严寻合作', brand: 'VFU' },
        //     { channel: '天猫', shopName: 'VFU运动旗舰店', brand: 'VFU' },
        //     { channel: '京东', shopName: 'VFU运动旗舰店-京东', brand: 'VFU' }
        // ];
        // const result = [];

        let result = this.transformData(response.rows);
        this.cascadeList = result

      });

    },
    //店铺渠道品牌转换

    transformData(data) {
      let result = [];

      data.forEach(item => {
        let brand = item.brand;
        let channel = item.channel;
        let shopName = item.shopName;

        // 如果brand在结果数组中不存在，则创建一个新的数组  
        let brandIndex = result.findIndex(brandObj => brandObj.label === brand);
        if (brandIndex === -1) {
          result.push({
            label: brand,
            value: brand,
            children: []
          });
          brandIndex = result.length - 1;
        }

        // 如果channel在当前brand的children数组中不存在，则创建一个新的数组  
        let channelIndex = result[brandIndex].children.findIndex(channelObj => channelObj.label === channel);
        if (channelIndex === -1) {
          result[brandIndex].children.push({
            label: channel,
            value: channel,
            children: []
          });
          channelIndex = result[brandIndex].children.length - 1;
        }

        // 如果shopName在当前channel的children数组中不存在，则创建一个新的数组  
        let shopIndex = result[brandIndex].children[channelIndex].children.findIndex(shopObj => shopObj.label === shopName);
        if (shopIndex === -1) {
          result[brandIndex].children[channelIndex].children.push({
            label: shopName,
            value: shopName,
            // children: []
          });
        }
      });

      return result;
    },
    /** 查缓存询信息 */
    getList() {
      getCache().then((response) => {
        // this.cache = response.data;
        // console.log(JSON.stringify(response.data));

        // this.usedmemory = echarts.init(this.$refs.usedmemory, "macarons");
        // this.usedmemory.setOption({
        //   tooltip: {
        //     formatter: "{b} <br/>{a} : " + this.cache.info.used_memory_human,
        //   },
        //   series: [
        //     {
        //       name: "峰值",
        //       type: "gauge",
        //       min: 0,
        //       max: 1000,
        //       detail: {
        //         formatter: this.cache.info.used_memory_human,
        //       },
        //       data: [
        //         {
        //           value: parseFloat(this.cache.info.used_memory_human),
        //           name: "内存消耗",
        //         }
        //       ]
        //     }
        //   ]
        // });
      });
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载分析销售监控数据，请稍候！");
    },
     // 返回顶部事件
     goBack() {
      let that = this; // 防止this指向问题
      // 防止频繁点击，故返回顶部后设置scrollTrigger为初始值
      if (that.scrollTrigger) {
        return;
      }
      // 获取当前距离顶部的距离
      let scrollTop = this.scrollTop;
      console.log(scrollTop);
      let steep = scrollTop / 800;
      let timer = setInterval(() => {
        that.scrollTrigger = true;
        // 滚动的速度逐渐变快，第一次走2000/1，然后减去已走的距离，下一次用剩下的距离再减去步进值，步进值也是不断变化，这样速度会越来越快
        scrollTop -= steep;
        // 步进值不改变的话会匀速缓慢上滑，不断增加步进值上滑的距离增加，视觉效果速度变快
        steep += 20;
        if (scrollTop <= 0) {
          clearInterval(timer);
          that.scrollTrigger = false;
        }
        that.$refs.outerDom.scrollTop = scrollTop;
      }, 30);
    },
    // 监听滚动条
    getScrollTop(e) {
      let that = this; // 防止this指向问题
      // 设备一屏的高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollTop = e.srcElement.scrollTop;
      this.scrollTop = scrollTop;
      // 判断距离顶部多少显示回到顶部图标
      if (scrollTop > clientHeight) {
        that.isShow = true;
      } else {
        that.isShow = false;
      }
    },

  }
}
</script>

<style lang="scss" scoped>

/* 移除默认的列表样式 */
ul {
  margin-top: 0.4%;
  list-style-type: none;
  /* 设置弹性布局，使列表项横向排列 */
  display: flex;
  /* 添加一些内边距和背景颜色 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置边框和圆角 */
  // border: 1px solid #ddd;
  border-radius: 5px;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

/* 设置列表项样式 */
li {
  /* 添加一些内边距和右边距 */
  // padding: 10px;
  margin-right: 10px;
  /* 设置链接文本样式 */
  font-size: 15px;
  color: #bbb;
  text-decoration: none;
}

li.active a {
  // color: #f00;
  /* 高亮颜色 */
  color: #fff;
  background-color: #40c9c6;
}

// section {
//   margin-top: 60px;
// }

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
  /* overflow-y: hidden; */
}
/* 最外层盒子样式 */
.outerBox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* padding:4px 6px; */
  padding: 32px;
  background-color: rgb(240, 242, 245);
}
/* 返回顶部样式 */
.scrollBox {
  position: fixed;
  right: 10px;
  bottom: 20px;
  font-size: 22px;
  z-index: 999;
}
/* 浏览器滚动条样式 */
::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgb(174, 174, 174);
  border-radius: 50px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
</style>




/** 商品平均销售毛利率 */
@Excel(name = "商品平均销售毛利率")
private Double averageSalesGrossProfit;

/** 商品平均销售毛利率 2位数 */
private String averageSalesGrossProfitStr;

/** 商品日常售价总额 */
@Excel(name = "商品日常售价总额")
private Double dailySellingPrice;

/** 商品平均折扣率 */
@Excel(name = "商品平均折扣率")
private Double averageDiscountRateGoods;

/** 商品平均折扣率  2位数*/
private String averageDiscountRateGoodsStr;

/** 赠品配件数 */
@Excel(name = "赠品配件数")
private Double complimentaryAccessoriesNumber;

/** 销售配件数 */
@Excel(name = "销售配件数")
private Integer salesAccessoriesNumber;

/** 配件总消耗量 */
@Excel(name = "配件总消耗量")
private Double accessoriesTotalConsumption;

private String accessoriesTotalConsumptionStr;
/** 配件总成本 */
@Excel(name = "配件总成本")
private Double accessoriesTotalCost;

/** 配件成本比率 */
@Excel(name = "配件成本比率")
private Double accessoriesCostRate;

/** 配件成本比率 2位数*/
private String accessoriesCostRateStr;

/** 配件消耗量比率 */
@Excel(name = "配件消耗量比率")
private Double accessoriesConsumptionRate;

private String accessoriesConsumptionRateStr;

/** 支付日期 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "支付日期", width = 30, dateFormat = "yyyy-MM-dd")
private Date payDate;

/** 支付日期-天 */
@JsonFormat(pattern = "yyyy-MM-dd")
@Excel(name = "支付日期-天", width = 30, dateFormat = "yyyy-MM-dd")
private Date payDay;

/** 客单价 */
@Excel(name = "客单价")
private Double customerUnitPrice;

/** 客单价 2位数 */
private String customerUnitPriceStr;

/** 货单价 */
@Excel(name = "货单价")
private Double unitPrice;

/** 货单价 2位数 */
private String unitPriceStr;
/** 商品销售总成本 */
@Excel(name = "商品销售总成本")
private Double totalCostSales;

/** 商品平均销售成本 */
@Excel(name = "商品平均销售成本")
private Double averageCostSales;

/** 商品平均销售成本 2 位数 */
private String averageCostSal

/** 店铺销售明细ID */
private Long id;

/** 店铺id */
@Excel(name = "店铺id")
private String shopId;

/** 店铺名称 */
@Excel(name = "店铺名称")
private String shopName;

/** 销售金额 */
@Excel(name = "销售金额")
private Double salesAmount;

/** 退款金额 */
@Excel(name = "退款金额")
private Double returnAmount;

/** 净销售额 */
@Excel(name = "净销售额")
private Double netSalesAmount;

/** 总销售件数 */
@Excel(name = "总销售件数")
private Integer totalSalesNumber;

/** 发货前退货数量 */
@Excel(name = "发货前退货数量")
private Integer returnBeforeShipmentNumber;

/** 发货前退货率*/
@Excel(name = "发货前退货率")
private Double returnBeforeShipmentRate;

/** 发货前退货率 2 位*/
private String returnBeforeShipmentRateStr;

/** 发货后退货数量 */
@Excel(name = "发货后退货数量")
private Integer returnAfterShipmentNumber;

/** 发货后退货率 */
@Excel(name = "发货后退货率")
private Double returnAfterShipmentRate;

/** 发货后退货率 保留2位 */
private String returnAfterShipmentRateStr;

/** 总退货件数 */
@Excel(name = "总退货件数")
private Integer totalReturnNumber;

/** 综合退货率 */
@Excel(name = "综合退货率")
private Double comprehensiveReturnRate;

/** 综合退货率 2位数*/
private String comprehensiveReturnRateStr;

/** 配件销售数 */
@Excel(name = "配件销售数")
private Integer accessoriesSalesNumber;

/** 配件销售金额 */
@Excel(name = "配件销售金额")
private Double accessoriesSalesAmount;

/** 配件货单价 */
@Excel(name = "配件货单价")
private Double accessoriesUnitPrice;

/** 配件货单价 2位数*/
private String accessoriesUnitPriceStr;

/** 商品销售件数 */
@Excel(name = "商品销售件数")
private Integer totalSoldNumber;

/** 商品销售总金额 */
@Excel(name = "商品销售总金额")
private Integer totalSoldAmount;

/** 商品货单价 */
@Excel(name = "商品货单价")
private Double unitPriceGoods;

/** 商品货单价 2位数 */
private String unitPriceGoodsStr;

/** 销售总毛利额 */
@Excel(name = "销售总毛利额")
private Double totalGrossProfitSales;

/** 订单数量 */
@Excel(name = "订单数量")
private Integer totalOrdersNumber;

/** 销售总成本 */
@Excel(name = "销售总成本")
private Double totalCostAmount;

/** 销售毛利 */
@Excel(name = "销售毛利")
private Integer salesGrossProfit;

/** 连带率 */
@Excel(name = "连带率")
private Double jointSeveralRate;

/** 连带率2位数 */
private String jointSeveralRateStr;
/** 客单价 */
